<template>
	<view class=" container feedback">
		<view class="feedback_info">
			<view class="feedback_info-image">
				<image src="/static/img/qq.png" class="avatar"></image>
			</view>
			<view class="feedback_info-context">
				<view class="feedback_info-context-h2">致尊敬的用户：</view>
				<view class="feedback_info-context-h3">您好！有任何问题都可以表达哦！为了给您提供更好的服务，我们竭诚期待您的建议啊~</view>
			</view>
		</view>
		<view class="feedback_form">
			<div class="feedback_form-wrap">
				<v-feedbackhead @barTap="barTap" :feedbackItem="feedbackItem" :activeIndex = "activeIndex"></v-feedbackhead>
				<view class="feedback_form-body">
					<textarea v-model="content" class="feedback_form-area" placeholder-style="color:#d8d8d8" placeholder="请将您的建议或是您的问题告诉我们,我们会认真的听取并及时反馈"/>
				</view>
			</div>
		</view>
		<button @click="commitFeedBack" type="primary" class="mini-btn">提交</button>
	</view>
</template>

<script>
	import mixins from '@/mixins/index';
	import vFeedbackhead from './fragment/vfeeditem/index';

	import UserService from '@/services/user/index';

	const userService = new UserService(false);

	export default {
		mixins: [mixins],
		components:{
			vFeedbackhead
		},
		data(){
			return {
				activeIndex:0,
				feedbackItem:[
//					{
//						code:'xitongwenti',
//						title:'系统问题'
//					},
//					{
//						code:'gongnengjianyi',
//						title:'功能建议'
//					},
//					{
//						code:'kechengneirong',
//						title:'课程内容'
//					},
//					{
//						code:'qita',
//						title:'其他'
//					},
//					{
//						code:'skill',
//						title:'警务技能'
//					}
				],
				content:''
			}
		},
		computed:{
		    code(){
				if(this.feedbackItem.length==0) return '';
		        return this.feedbackItem[this.activeIndex].code
			}
		},
		methods:{
			barTap(activeIndex){
			    this.activeIndex = activeIndex;
			},
            commitFeedBack(){
			    const content = this.content;
			    const type = this.code;
                userService.postFeedBack({content,type}).then(
                    resultDto=>{
                        uni.showToast({
                            title: resultDto.message,
                            icon: 'none',
                            duration: 2000,
                            success:function () {
                                if (resultDto.success){
                                    setTimeout(function () {
                                        uni.navigateBack()
                                    },1000)
                                }
                            }
                        });

					}
				)
			}
		},
		onLoad(){
            userService.getFeedBackOptions().then(
                resultDto=>{
                    if (resultDto.success){
                        this.feedbackItem = resultDto.result;
					}
				}
			)
		}
	}
</script>

<style>
page {
	background-color: #f1f1f1;
}
</style>
<style lang="scss" scoped>
	.container {
		width: 100%;
		height: 100%;
	}
	.feedback {
		&_info {
			display: flex;
			padding: 20upx;
			flex-direction: row;
			justify-content: flex-start;
			background-color: #fff;
			margin-bottom: 16upx;
			
			&-image {
				width: 60upx;
				height: 60upx;
				.avatar {
					width: 60upx;
					height: 60upx;
				}
			}
			&-context {
				color: #333;
				margin-left: 20upx;
				&-h2 {
					font-size: 30upx;
					font-weight: 700;
					line-height: 60upx;
				}
				&-h3 {
					font-size: 24upx;
					color: #999;
				}
			}
		}
		&_form {
			background-color: #fff;
			border: 1px solid #eee;
			margin: 0 auto;
			padding: 0 20upx;
			&-wrap {
				margin: 0 auto;
			}
			&-area {
				width: 100%;
				font-size: 24upx;
				line-height: 1.2;
				padding: 20upx;
				border: 1px solid #d8d8d8;
				height: 500upx;
			}
			&-body {
				padding: 20upx;
				font-size: 20upx;
			}
		}
		
	}
	.mini-btn {
		border-radius: 8upx;
		width: 590upx;
		height: 80upx;
		line-height: 80upx;
		text-align: center;
		background-color: #377cfd;
		color: #fff;
		font-size: 28upx;
		bottom: 10upx;
		position: fixed;
		bottom: 40upx;
		left: 50%;
		margin-left: -(590upx / 2);
	}
</style>
